<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="box">
        <p>111</p>
        <span>222</span>
        <h3 class="c">333</h3>

        <h5 id="a">44444444</h5>
        <h6>7777</h6>
    </div>


    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>

        // 事件委托 ： 当同类型事件很多的时候，在祖先元素上绑定这个事件
        //    好处
        //       可以减少事件处理函数，优化性能
        //       可以给将来的对象绑定事件
        //    原理：基于事件冒泡


        // 想给p   span    h3分别绑定事件


        //   页面上事件处理函数越多，性能就越差


        //   p 和  span   h3  的事件都会触发  box的事件  

        var oBox = document.querySelector('.box');
        var oP = document.querySelector('p');
        var oSpan = document.querySelector('span');

        oBox.onclick = function (e) {
            // console.log(e.target);

            console.log(e.target.tagName);    // 大写的

            if (e.target === oP) {
                console.log('p');
            }

            else if (e.target === oSpan) {
                console.log('span');
            }

            // 标签也是对象 ， 对象有属性
            else if (e.target.className === 'c') {
                console.log('h3');
            }

            else if (e.target.id === 'a') {
                console.log('h5');
            }


            else if (e.target.tagName === 'H6') {
                console.log('h6');
            }

            else if (e.target.className === 'q') {
                console.log(666);
            }
        }






        setTimeout(function () {
            var oDiv = document.createElement('div');
            oDiv.className = 'q';
            oDiv.innerHTML = '我是后来的';
            oBox.appendChild(oDiv);
        }, 5000)






        // var oLis = document.querySelectorAll('li');
        // for (var i = 0; i < oLis.length; i++) {
        //     oLis[i].onclick = function () {
        //         console.log(222);
        //     }
        // }
        var oUl = document.querySelector('ul');

        oUl.onclick = function (e) {
            if (e.target.tagName === 'LI') {
                console.log(222);
            }
        }



        setTimeout(function () {
            var oDiv = document.createElement('li');
            oDiv.className = 'q';
            oDiv.innerHTML = '我是后来的';
            oUl.appendChild(oDiv);
        }, 2000)




    </script>

</body>

</html>